<template>
  <div>pinia</div>
  <div>{{ store.count }}</div>
  <div>{{ store.$state.count }}</div>
  <div>{{ store.doubleCount }}</div>
  <div>
    <button @click="add">直接加</button>
    <button @click="store.addCount(2)">action加</button>
    <button @click="patch">patch对象加</button>
    <button @click="patch2">patch方法加</button>
    <button @click="reset">重置</button>
    <button @click="dispose">停</button>
    <button @click="setState">替换</button>
    <button @click="xxx">XXX</button>
  </div>
  <ul>
    <li v-for="item in store.fruits" :key="item">{{ item }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from './store';
const store = useStore();
function add() {
  store.count++;
  store.fruits.push("橘子")
  store.obj.b = 2;
}
function patch() {
  store.$patch({
    store: store.count++,
    fruits: [...store.fruits, '橘子'],
  })
}
function patch2() {
  store.$patch(() => {
    store.count++;
    store.fruits.push("橘子")
  })
}
function reset() {
  store.$reset();
}
store.$subscribe((type, state) => {
  console.log("数据变化了");
})
store.$onAction(({ after, onError, name }) => {
  console.log("action执行", name);
  after((val) => {
    console.log("action执行完毕", val)
  });
  onError((err) => {
    console.log("action报错了", err)
  });
})
function dispose() {
  store.$dispose();
}
function setState() {
  store.$state = { count: 100, fruits: [] };
}
function xxx() {
  store.xxx();
}
</script>

<style scoped>
</style>
